<template>
    <view class="recycle_order_list-container">
        <!-- Tabs -->
        <view class="tabs-container">
            <u-tabs 
              :list="tabs" 
              :is-scroll="false" 
              :current="tabCurrent" 
              font-size="28"
              active-color="#333333"
              bar-width="80"
              :bar-style="{'background-color': '#FF4D40'}"
              @change="changeTab" 
            />
        </view>
        
        <!-- Content -->
        <view class="recycle_order_list-content">
            <!-- 全部 -->
            <view v-show="tabCurrent == 0">
                <block v-for="item in allOrderList" :key="item.id">
                    <view class="recycle_order-list-item">
                        <recycle-order-list-panel :data="item" @on-self="goDetails" />
                    </view>
                </block>
                <loading-footer :status="allStatus.status" />
            </view>
            
            <!-- 进行中 -->
            <view v-show="tabCurrent == 1">
                <block v-for="item in doingOrderList" :key="item.id">
                    <view class="recycle_order-list-item">
                        <recycle-order-list-panel :data="item" @on-self="goDetails" />
                    </view>
                </block>
                <loading-footer :status="doingStatus.status" />
            </view>
            
            <!-- 已完成 -->
            <view v-show="tabCurrent == 2">
                <block v-for="item in doneOrderList" :key="item.id">
                    <view class="recycle_order-list-item">
                        <recycle-order-list-panel :data="item" @on-self="goDetails" />
                    </view>
                </block>
                <loading-footer :status="doneStatus.status" />
            </view>
        </view>
    </view>
</template>


<script>
    import { getOrderList } from '@/api/recycle';
    import { loadingType } from '@/utils/type';
    import { loadingFun } from "@/utils/tools";
    
    export default {
        data() {
            return {
                // Tabs列表
                tabs: [{
					name: '全部'
				}, {
					name: '进行中'
				}, {
					name: '已完成',
				}],
                tabCurrent: 0,      // 当前Tab索引  [0-所有订单; 1-进行中订单; 2-已完成订单;]
                allOrderList: [],   // 所有订单列表
                doingOrderList: [], // 进行中订单列表
                doneOrderList: [],  // 已完成订单列表
                // 全部列表状态
                allStatus: {
                    page: 1,
                    status: loadingType.LOADING,
                },
                // 进行中列表状态
                doingStatus: {
                    page: 1,
                    status: loadingType.LOADING,
                },
                // 已完成列表状态
                doneStatus: {
                    page: 1,
                    status: loadingType.LOADING,
                }
            }
        },
        methods: {
            // 切换Tabs
            changeTab(index) {
                this.tabCurrent = index;
            },
            
            // 全部列表数据请求
            reqAllOrderList() {
                loadingFun(
                    getOrderList,
                    this.allStatus.page,
                    this.allOrderList,
                    this.allStatus.status,
                    { type: 'all' }
                ).then(res => {
                    if (!res) return;
                    this.allStatus.page = res.page
                    this.allOrderList = res.dataList
                    this.allStatus.status = res.status
                });
            },
            
            // 进行中列表数据请求
            reqDoingOrderList() {
                loadingFun(
                    getOrderList,
                    this.doingStatus.page,
                    this.doingOrderList,
                    this.doingStatus.status,
                    { type: 'onl' }
                ).then(res => {
                    if (!res) return;
                    this.doingStatus.page = res.page
                    this.doingOrderList = res.dataList
                    this.doingStatus.status = res.status
                });
            },
            
            // 已完成列表数据请求
            reqDoneOrderList() {
                loadingFun(
                    getOrderList,
                    this.doneStatus.page,
                    this.doneOrderList,
                    this.doneStatus.status,
                    { type: 'end' }
                ).then(res => {
                    if (!res) return;
                    this.doneStatus.page = res.page
                    this.doneOrderList = res.dataList
                    this.doneStatus.status = res.status
                });
            },
            
            // 状态初始化 
            resetData() {
                this.allOrderList.length = 0,   // 所有订单列表
                this.doingOrderList.length = 0, // 进行中订单列表
                this.doneOrderList.length = 0,  // 已完成订单列表
                // 全部列表状态
                this.allStatus = {
                    page: 1,
                    status: loadingType.LOADING,
                }
                // 进行中列表状态
                this.doingStatus = {
                    page: 1,
                    status: loadingType.LOADING,
                }
                // 已完成列表状态
                this.doneStatus = {
                    page: 1,
                    status: loadingType.LOADING,
                }
            },
            
            // 跳转详情
            goDetails(id) {
                uni.navigateTo({
                    url: '/bundle/pages/recycle_order_detail/recycle_order_detail'
                      + '?id=' + id
                })
            }
            
        },
        
        onShow() {
            // 初始化请求状态
            this.resetData();
            // 各列表数据请求
            this.reqAllOrderList();
            this.reqDoingOrderList();
            this.reqDoneOrderList();
        },
        
        // 下拉加载更多
        onReachBottom() {
            // 根据当前的Tab请求相应的数据
            switch(this.tabCurrent) {
                case 0: return this.reqAllOrderList();
                case 1: return this.reqDoingOrderList();
                case 2: return this.reqDoneOrderList();
            }
        },
    }
</script>


<style scoped>
    .recycle_order_list-container {
        padding-top: 88rpx;
    }
    
    .tabs-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
    
    .recycle_order_list-content {
        padding: 20rpx;
    }
    
    .recycle_order-list-item:nth-child(n + 2) {
        margin-top: 20rpx;
    }
</style>
